<template>
    <van-config-provider
            theme="dark"
            :theme-vars="themeVars">
        <router-view/>

        <!-- 底部导航栏 -->
        <van-tabbar v-if="showBottomBar" ref="refBottomBar" route safe-area-inset-bottom>
            <van-tabbar-item replace to="/home" icon="chat-o">智能问答</van-tabbar-item>
        </van-tabbar>
    </van-config-provider>
</template>

<script setup>
import router from "@/router";
import {computed, onMounted, reactive, ref} from "vue";
import store from "@/store";
import {setToastDefaultOptions} from "vant";
import {toAuthUrl, WECHAT_AUTH_SCOPE_BASE} from "@/utils/wechatUtil";
import {getUrlParam} from "@/utils/common";

// dom元素
const refBottomBar = ref(null)
const themeVars = reactive({})

// 是否显示底部导航栏
const showBottomBar = computed(() => {
    // 只显示一级页面
    return router.currentRoute.value.path.split('/').length < 3
})

onMounted(() => {
    // 检查环境
    if (!checkEnv()) {
        return
    }

    // 初始化全局配置
    initGlobalConfig()
})

// 检查环境
const checkEnv = () => {
    //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）gdk 暂时不需要判断是否是微信
    /*const isWechat = !(navigator.userAgent.indexOf('MicroMessenger') > -1);
    if (!isWechat) {
        store.commit('common/update', {isWechat: false})
        showErrorPage('replace', '请在微信中打开')
    }*/

    // 如果没有授权snsapi_base，重定向到微信网页授权链接
    const code = getUrlParam('code')
    const state = getUrlParam('state')
    if (!code) {
        toAuthUrl(WECHAT_AUTH_SCOPE_BASE, window.location.pathname, '')
        return false
    } else if ('registry' !== state) {
        store.dispatch('user/loginWechat', code)
        return true
    }

    return true
}

// 初始化全局配置
const initGlobalConfig = () => {
    // 初始化微信
    initWechat()

    // 获取底部导航栏高度
    store.commit('common/update', {bottomBarHeight: refBottomBar.value.$el.offsetHeight})
    // 监听页面高度变化
    window.addEventListener('resize', handleWindowResize);

    // 判断是否支持sse环境
    store.commit('common/update', {supportSSE: Boolean(window.EventSource)})

    // 修改全局showToast配置 https://vant-contrib.gitee.io/vant/#/zh-CN/toast
    setToastDefaultOptions({
        position: "top",
        wordBreak: "break-word",
        closeOnClick: true
    })
}

// 初始化微信
const initWechat = async () => {
    // 获取config需要的数据
    /*getJsapiSignature().then(res => {
        let data = res.data;
        wechat.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            // appId: '', // 必填，公众号的唯一标识
            // timestamp:, // 必填，生成签名的时间戳
            // nonceStr: '', // 必填，生成签名的随机串
            // signature: '',// 必填，签名
            ...data,
            // 必填，需要使用的JS接口列表
            jsApiList: ['chooseWXPay'] // 调起微信支付窗口
        });

        wechat.ready(function (res) {
            store.commit("common/update", {isWechatJsapiInit: true})
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        });

        wechat.error(function (res) {
            showFailToast("初始化微信环境失败，部分微信相关功能暂不可用")
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
    })*/
}

// 监听页面高度变化
const handleWindowResize = () => {
    // console.log(`监测可视窗口高度：${window.innerHeight}px`)
    store.commit("common/update", {
        windowInnerHeight: window.innerHeight,
        windowInnerWidth: window.innerWidth
    })
}

</script>

<style lang="scss">
// 全局样式设置
.van-theme-dark body {
  background-size: 100% 100%;;
  background-image: url('assets/img/globalBackground.jpg');
}

.van-theme-dark van-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}*/
</style>
